/**
 * 开关图层管理器
 */
function toggleLayerControl() {
    const img = document.querySelector('#layer-switch')
    const status = img.getAttribute('status')
    const contentDOM = document.querySelector('.control-content')
    if (status == 'open') {
        img.setAttribute('status', 'close')
        contentDOM.style.display = 'none'
    } else {
        img.setAttribute('status', 'open')
        contentDOM.style.display = 'block'
    }
}

/**
 * 基于菜单json构建图层控制组件
 * @param {*} menu from ./menu.js
 */
function buildLayerControlMenu(menu) {
    const container = document.querySelector('.layer-control-content')
    // 分南北校区处理
    for (let i = 0; i < menu.length; i++) {
        const part = menu[i]
        const schoolContainer = document.createElement('div')
        // 标题
        const titleDOM = document.createElement('div')
        titleDOM.className = 'layer-control-title title'
        titleDOM.innerHTML = `<h1>${part.title}</h1>`
        schoolContainer.appendChild(titleDOM)
        // 子节点
        const layersContainer = document.createElement('div')
        layersContainer.className = 'layer-control-layers'
        const { layers } = part
        layers.forEach(layer => {
            const partBox = document.createElement('div')
            partBox.className = 'form-item'
            partBox.innerHTML = `
                <label class='rambler-label' for="${layer.name}">
                    <input
                        id="${layer.name}"
                        class="checkbox-item"
                        type="checkbox"
                        name="layers"
                        checked="true"
                        onchange="handleLayerChange(this)"
                        value="${layer.layers}"
                    />
                    <div class="rambler-label-decoration">
                        <img src="${baseServer}/assets/icons/${layer.icon}.svg" width="30px" height="30px">
                        <p class="rambler-label-text">${layer.title}</p>
                    </div>
                </label>
            `
            layersContainer.appendChild(partBox)
        })
        schoolContainer.appendChild(layersContainer)
        container.appendChild(schoolContainer)
    }
}

document.querySelectorAll('#trace option').forEach(option => {
    option.addEventListener('click', e => {
        console.log(e.target)
    })
})
